<template>
    <div>
        <!--=====================================-->
        <!--=            Banner Start           =-->
        <!--=====================================-->
        <section class="main-banner-wrap-layout1 bg-dark-overlay bg-common minus-mgt-90"
                 data-bg-image="../assets/images/banner/banner.jpg">
            <div class="container">
                <div class="main-banner-box-layout1 animated-headline">
                    <h1 class="ah-headline item-title">
                        <span class="ah-words-wrapper">
                            <b class="is-visible">买, 卖, 出租 &amp; 一键交换</b>
                            <b>买, 卖, 出租 &amp; 一键交换</b>
                        </span>
                    </h1>
                    <div class="item-subtitle">搜索超过2000+活跃广告在29+类别免费</div>
                    <div class="search-box-layout1">
                        <form action="#">
                            <div class="row no-gutters">
                                <div class="col-lg-4 form-group">
                                    <div class="input-search-btn search-category" data-toggle="modal"
                                         data-target="#modal-category">
                                        <i class="fas fa-tags"></i>
                                        <label>选择类别</label>
                                    </div>
                                </div>
                                <div class="col-lg-5 form-group">
                                    <div class="input-search-btn search-keyword">
                                        <i class="fas fa-text-width"></i>
                                        <input type="text" class="form-control" placeholder="在这里输入关键字 ..."
                                               name="keyword">
                                    </div>
                                </div>
                                <div class="col-lg-3 form-group">
                                    <button type="submit" class="submit-btn"><i class="fas fa-search"></i>搜索</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </section>
        <!--=====================================-->
        <!--=            人气类别           =-->
        <!--=====================================-->
        <section class="section-padding-top-heading">
            <div class="container">
                <div class="heading-layout1">
                    <h2 class="heading-title">人气类别</h2>
                </div>
                <div class="row">
                    <div class="col-lg-3 col-md-4 col-sm-6" v-for="(taskCategory, index) in home.taskCategoryList">
                        <div class="category-box-layout1">
                            <a href="#">
                                <div class="item-icon">
                                    <i class="far fa-building"></i>
                                </div>
                                <div class="item-content">
                                    <h3 class="item-title">{{taskCategory.name}}</h3>
                                    <div class="item-count">{{taskCategory.taskCount}}</div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--=====================================-->
        <!--=            精选商品          =-->
        <!--=====================================-->
        <section class="section-padding-top-heading bg-accent">
            <div class="container">
                <div class="flex-heading-layout1">
                    <div class="heading-layout2">
                        <h2 class="heading-title">精选商品</h2>
                    </div>
                </div>
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div v-for="(hostTask, index) in home.hotTaskList" class="swiper-slide product-box-layout1">
                            <div class="item-img">
                                <a href="single-product1.html" class="item-trending"><img
                                        src="media/product/product14.jpg" alt="Product"></a>
                            </div>
                            <div class="item-content">
                                <h3 class="item-title"><a href="single-product1.html">{{hostTask.name}}</a></h3>
                                <ul class="entry-meta">
                                    <li><i class="far fa-clock"></i>{{hostTask.createTime}}</li>
                                </ul>
                                <div class="item-price">
                                    <span class="currency-symbol">$</span>
                                    {{hostTask.productPrice}}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </section>
        <!--=====================================-->
        <!--=       新增商品           	=-->
        <!--=====================================-->
        <section class="section-padding-top-heading bg-accent">
            <div class="container">
                <div class="flex-heading-layout1">
                    <div class="heading-layout2">
                        <h2 class="heading-title">新增商品</h2>
                    </div>
                </div>
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div v-for="(hostTask, index) in home.hotTaskList" class="swiper-slide product-box-layout1">
                            <div class="item-img">
                                <a href="single-product1.html" class="item-trending"><img
                                        src="media/product/product14.jpg" alt="Product"></a>
                            </div>
                            <div class="item-content">
                                <h3 class="item-title"><a href="single-product1.html">{{hostTask.name}}</a></h3>
                                <ul class="entry-meta">
                                    <li><i class="far fa-clock"></i>{{hostTask.createTime}}</li>
                                </ul>
                                <div class="item-price">
                                    <span class="currency-symbol">$</span>
                                    {{hostTask.productPrice}}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </section>
        <!--=====================================-->
        <!--=      我们的价格和套餐           	=-->
        <!--=====================================-->
        <section class="section-padding-top-heading">
            <div class="container">
                <div class="heading-layout1">
                    <h2 class="heading-title">我们的价格和套餐</h2>
                </div>
                <div class="row">
                    <div class="col-xl-3 col-md-6">
                        <div class="pricing-box-layout1">
                            <h3 class="item-title">自由</h3>
                            <div class="price-box">
                                <span class="item-currency">￥0</span>
                                <span class="item-duration">/ 每月</span>
                            </div>
                            <div class="item-features">
                                <ul>
                                    <li>3个常规广告</li>
                                    <li>无特色广告</li>
                                    <li>无热门广告</li>
                                </ul>
                            </div>
                            <div class="item-btn">
                                <a href="#" class="btn-fill-xl color-light bgPrimary">现在开通</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6">
                        <div class="pricing-box-layout1">
                            <h3 class="item-title">基础</h3>
                            <div class="price-box">
                                <span class="item-currency">￥19</span>
                                <span class="item-duration">/ 每月</span>
                            </div>
                            <div class="item-features">
                                <ul>
                                    <li>3个常规广告</li>
                                    <li>1个特色广告</li>
                                    <li>1个热门广告</li>
                                </ul>
                            </div>
                            <div class="item-btn">
                                <a href="#" class="btn-fill-xl color-light bgPrimary">现在开通</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6">
                        <div class="pricing-box-layout1">
                            <h3 class="item-title">黄金</h3>
                            <div class="price-box">
                                <span class="item-currency">$39</span>
                                <span class="item-duration">/ 每月</span>
                            </div>
                            <div class="item-features">
                                <ul>
                                    <li>5个常规广告</li>
                                    <li>2个特殊广告</li>
                                    <li>3个热门广告</li>
                                </ul>
                            </div>
                            <div class="item-btn">
                                <a href="#" class="btn-fill-xl color-light bgPrimary">现在开通</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6">
                        <div class="pricing-box-layout1">
                            <h3 class="item-title">钻石</h3>
                            <div class="price-box">
                                <span class="item-currency">￥59</span>
                                <span class="item-duration">/ 每月</span>
                            </div>
                            <div class="item-features">
                                <ul>
                                    <li>无线常规广告</li>
                                    <li>5个特色广告</li>
                                    <li>10个热门广告</li>
                                </ul>
                            </div>
                            <div class="item-btn">
                                <a href="#" class="btn-fill-xl color-light bgPrimary">现在开通</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--=====================================-->
        <!--=       Modal Start           	 	=-->
        <!--=====================================-->
        <div class="modal fade modal-location" id="modal-location" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <button type="button" class="close modal-close" data-dismiss="modal" aria-label="Close">
                        <span class="fas fa-times" aria-hidden="true"></span>
                    </button>
                    <div class="location-list">
                        <h4 class="item-title">Location</h4>
                        <ul>
                            <li><a href="#">California</a></li>
                            <li><a href="#">Kansas</a></li>
                            <li><a href="#">Louisiana</a></li>
                            <li><a href="#">New Jersey</a></li>
                            <li><a href="#">New York</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade modal-location" id="modal-category" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <button type="button" class="close modal-close" data-dismiss="modal" aria-label="Close">
                        <span class="fas fa-times" aria-hidden="true"></span>
                    </button>
                    <div class="location-list">
                        <h4 class="item-title">Category</h4>
                        <ul>
                            <li>
                                <a href="#"><span class="item-icon"><img src="media/category/category5.png"
                                                                         alt="icon"></span>Business &amp;
                                    Industry</a>
                            </li>
                            <li>
                                <a href="#"><span class="item-icon"><img src="media/category/category7.png"
                                                                         alt="icon"></span>Cars &amp; Vehicles</a>
                            </li>
                            <li>
                                <a href="#"><span class="item-icon"><img src="media/category/category14.png"
                                                                         alt="icon"></span>Electronics</a>
                            </li>
                            <li>
                                <a href="#"><span class="item-icon"><img src="media/category/category4.png"
                                                                         alt="icon"></span>Health &amp; Beauty</a>
                            </li>
                            <li>
                                <a href="#"><span class="item-icon"><img src="media/category/category18.png"
                                                                         alt="icon"></span>Hobby, Sport &amp;
                                    Kids</a>
                            </li>
                            <li>
                                <a href="#"><span class="item-icon"><img src="media/category/category8.png"
                                                                         alt="icon"></span>Home Appliances</a>
                            </li>
                            <li>
                                <a href="#"><span class="item-icon"><img src="media/category/category6.png"
                                                                         alt="icon"></span>Jobs</a>
                            </li>
                            <li>
                                <a href="#"><span class="item-icon"><img src="media/category/category12.png"
                                                                         alt="icon"></span>Others</a>
                            </li>
                            <li>
                                <a href="#"><span class="item-icon"><img src="media/category/category11.png"
                                                                         alt="icon"></span>Pets &amp; Animals</a>
                            </li>
                            <li>
                                <a href="#"><span class="item-icon"><img src="media/category/category3.png"
                                                                         alt="icon"></span>Property</a>
                            </li>
                            <li>
                                <a href="#"><span class="item-icon"><img src="media/category/category1.png"
                                                                         alt="icon"></span>Services</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import Swiper from 'swiper'

    export default {
        name: 'Home',
        data() {
            return {
                home: {}
            };
        },
        mounted() {
            this.$store.dispatch('ProductHome').then(response => {
                this.home = response.data
            })
            new Swiper('.swiper-container', {
                autoplay:true,
                slidesPerView: 3,
                spaceBetween: 30,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
            });
        }
    }
</script>
<style scoped>
    @import "~swiper/css/swiper.css";
    .el-tag {
        height: 25px;
        line-height: 25px;
        margin-left: 6px;
    }

    #starlist li .title {
        color: #00a7eb;
    }


    .userInfoAvatar {

        width: 35px;
        height: 35px;
        position: absolute;
        right: -77px;
        top: 15px;
    }

    .userInfoAvatar img {
        width: 35px;
        height: 35px;
        border-radius: 50%;
    }

    @media only screen and (max-width: 600px) {
        .userInfoAvatar {
            width: 35px;
            height: 35px;
            position: absolute;
            right: 0px;
            top: 12px;
        }

        .searchbox {
            position: absolute;
            right: 40px;
            top: 0
        }
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        margin: 0, 0, 0, 10px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409eff;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
    }

    .imgBody {
        width: 100px;
        height: 100px;
        border: solid 2px #ffffff;
        float: left;
        position: relative;
    }

    .imgBody img {
        width: 100px;
        height: 100px;
    }

    .uploadImgBody {
        margin-left: 5px;
        width: 100px;
        height: 100px;
        border: dashed 1px #c0c0c0;
        float: left;
        position: relative;
    }

    .uploadImgBody :hover {
        border: dashed 1px #00ccff;
    }

    .inputClass {
        position: absolute;
    }


    .commentList {
        width: 100%;
        margin: 0 auto;
    }

    .commentList .p1 {
        float: left;
    }

    .commentList .left {
        display: inline-block;
        width: 10%;
        height: 100%;
    }

    .commentList .left img {
        margin: 0 auto;
        width: 100%;
        border-radius: 50%;
    }

    .commentList .right {
        display: inline-block;
        width: 85%;
        margin-left: 5px;
    }

    .commentList .rightTop {
        height: 30px;
    }

    .commentList .rightTop .userName {
        color: #303133;
        margin-left: 10px;
        font-size: 16px;
        font-weight: bold;
    }

    .commentList .rightTop .timeAgo {
        color: #909399;
        margin-left: 10px;
        font-size: 15px;
    }

    .commentList .rightCenter {
        margin-left: 20px;
        line-height: 30px;
        height: 60px;
    }

    .commentList .rightBottom el-link {

    }

    .feedbackCard .item .title {
        display: inline-block;
        width: 70px;
        margin-bottom: 10px;
        font-size: 14px;
        font-weight: bold;
    }

    .feedbackCard .item .content {
        display: inline-block;
        width: 240px;
        margin-bottom: 5px;
    }

</style>
